<template>
<div class="content-box">
  <div class="container">
    <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="index"
      label="股票代码"
      width="120">
    </el-table-column>
    <el-table-column
      prop="name"
      label="股票名称"
      width="200">
    </el-table-column>
     <el-table-column
      prop="price"
      label="当前价格"
      width="150">
    </el-table-column>
    <el-table-column
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看详细信息</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</div>
</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        this.$prompt('请输入卖出数量', '卖出股票', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '恭喜您卖出: ' + value + '股股票'
          });
          row.count-=value;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '终止交易'
          });       
        });
        
      }
    },

    data() {
      return {
        tableData: [{
          index: '600000',
          name: '浦发银行',
          buy_price: 10,
          buy_time: '2022-5-30',
          count: 100,
          price: 12
        }, {
          index: '600000',
          name: '浦发银行',
          buy_price: 10,
          buy_time: '2022-5-30',
          count: 100,
          price: 12
        }, {
          index: '600000',
          name: '浦发银行',
          buy_price: 10,
          buy_time: '2022-5-30',
          count: 100,
          price: 12
        },]
      }
    }
  }
</script>